<!DOCTYPE html>
<html ng-app="todo">
  <head>
    <title>AngularFire Todo e2e Test</title>

    <!-- Angular -->
    <script src="../../../node_modules/angular/angular.min.js"></script>

    <!-- Firebase -->
    <script src="../../../node_modules/firebase/firebase.js"></script>

    <!-- AngularFire -->
    <script src="../../../dist/angularfire.js"></script>

    <!-- Initialize the Firebase SDK -->
    <script src="../../initialize.js"></script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="todo.css">
  </head>

  <body ng-controller="TodoCtrl">
    <div>
      <!-- Firebase URL where data is stored (used by the test spec to know where data is stored) -->
      URL: <span id="url" ng-bind="url"></span>

      <!-- Clear Firebase button -->
      <button id="clearRefButton" ng-click="clearRef()">Clear Ref</button>

      <!-- Add a random todo button -->
      <button id="addRandomTodoButton" ng-click="addRandomTodo()">Add a Random Todo</button>

      <!-- Destroy array button button -->
      <button id="destroyArrayButton" ng-click="destroyArray()">Destroy Array</button>
    </div>

    <!-- Add todo input -->
    <form ng-submit="addTodo()">
      <input placeholder="What needs to be done?" ng-model="newTodo" autofocus>
    </form>

    <!-- Todo list -->
    <div id="todos">
      <div class="todo" ng-cloak ng-repeat="(id, todo) in todos" id="todo-{{$index}}">
        <input class="toggle" type="checkbox" ng-model="todo.completed" ng-change="todos.$save(todo)" />
        <input class="edit" ng-model="todo.title" ng-change="todos.$save(todo)" />
        <button class="removeTodoButton" ng-click="removeTodo(id)">Remove</button>
      </div>
    </div>

    <!-- Custom JS -->
    <script src="todo.js" defer></script>
  </body>
</html>
